<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精彩游记记录精彩瞬间</title>
    <link rel="stylesheet" href="sycss/youji-z.css">
    <link rel="stylesheet" href="css1/B_floor.css">
    <link rel="stylesheet" href="css1/Tool_bar.css">
    <link rel="stylesheet" href="sycss/Tou.css">
    <script src="js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // $(function () {
        //     $(document).scroll(function () {
        //         if($(document).scrollTop()>=300){
        //             $("#bd ul").fadeIn(500);
        //         }else{
        //             $("#bd ul").fadeOut(500);
        //         }
        //     })
        // })
        var userId =  $.cookie('userId');
        var i = 0;
        function change(){
            $("#slideBox li").eq(i).fadeIn().siblings().fadeOut();
        }
        $(function aa(){
            setTimeout(function () {
                $("#slideBox li").eq(i).fadeIn(2000).siblings().fadeOut(2000);
                $("#slideBox .hd li").eq(i).addClass("on");
                $("#slideBox .hd li").eq(i-1).removeClass("on");
                i++;
                if(i == 5){
                    i = 0;
                    $("#slideBox .hd li").eq(5).removeClass("on");
                }
                aa();
            },5000);
        });
        // setInterval
// $("#slideBox .hd li").click(function () {
// })
    </script>
    <script>
        $(function () {
            var pageNum = 1;
            var pageMax = null;
            ajax();
         var vm = new Vue({
                el:"#article",
                data:{
                    articles:[],
                    pages: []
                },
             methods:{
                 pageUp:function () {
                     if(pageNum>1){
                         pageNum--;
                         ajax();
                     }
                     else{
                         confirm("没有上一页啦！")
                     }
                 },
                 pageDown:function () {
                     if(pageNum<pageMax){
                         pageNum++;
                         ajax();
                     } else{
                         confirm("已经事最后一页了")
                     }
                 },
                 pageIndex:function (index) {
                     pageNum = index+1;
                     ajax();
                 },
                 goToArticle:function (index) {
                     var indexId = this.articles[index].articleId.toString();
                     sessionStorage.setItem("articleId", indexId);
                     $.ajax({
                         url:"/hot",
                         data: {
                            articleId : indexId,
                             hot:this.articles[index].hot
                         },
                         type:"post",
                         success:function () {
                             location.href="travel_details.html"
                         }
                     });
                 }
             }
            });
         $(".nav_li").click(function () {
             $(".nav_li").removeClass("active");
             $(this).addClass("active");
         });

            $(".nav_li:first").click(function () {
                pageNum=1;
                ajax();
            });

         $(".nav_li:first").next().click(function () {
             $.ajax({
                 url:"/selectBestArticles",
                 type:"post",
                 data:{
                     isBest:"true",
                     pageNum:pageNum
                 },
                 dataType:"json",
                 success:function (data) {
                     vm.pages=[];
                     vm.articles=[];
                     for (var i = 0; i < data.list.length; i++) {
                         vm.articles.push({
                             articleId:data.list[i].articleId,
                             articleFace: data.list[i].articleFace,
                             articleLocal: data.list[i].articleLocal,
                             articleContent: data.list[i].articleContent,
                             articleTitle: data.list[i].articleTitle,
                             userRickname: data.list[i].users.userRickname,
                             userPicaddress: data.list[i].users.userPicaddress,
                             hot: data.list[i].hot
                         });
                     }
                     for(var j =0;j<data.pages;j++){
                         vm.pages.push({
                             pageNum:j+1
                         })
                     }
                     pageMax = data.pages;

                 }
             })
         });

         function ajax(){
             $.ajax({
                 url:"/getAllArticles",
                 type:"post",
                 data:{
                     pageNum:pageNum
                 },
                 dataType:"json",
                 success:function (data) {
                     vm.pages=[];
                     vm.articles=[];
                     for (var i = 0; i < data.list.length; i++) {
                         vm.articles.push({
                             articleId:data.list[i].articleId,
                             articleFace: data.list[i].articleFace,
                             articleLocal: data.list[i].articleLocal,
                             articleContent: data.list[i].articleContent,
                             articleTitle: data.list[i].articleTitle,
                             userRickname: data.list[i].users.userRickname,
                             userPicaddress: data.list[i].users.userPicaddress,
                             hot: data.list[i].hot
                         });
                     }
                     for(var j =0;j<data.pages;j++){
                         vm.pages.push({
                             pageNum:j+1
                         })
                     }
                     pageMax = data.pages;
                 }
             })
         }
         $("#search_button").click(function () {
             var msg = $(this).prev().val();
             $.ajax({
                 url:"/selectSolr",
                 data: {
                     msg:msg
                 },
                 type:"post",
                 dataType:"json",
                 success:function (data){
                     confirm("查询成功！")
                 }
             })

         })


        })






    </script>

</head>
<body>
<div id="app">
<!--  -------------  导航栏   ------------ -->
    <div class="public_head">
        <div class="public_head_auto">
            <ul class="public_head_nav">
                <li class="logo"><a href="" target="_blank">
                    <img src="./images/logo_y.png" alt="">
                </a></li>
                <li><a href="sy-index.html">首页</a></li>
                <li><a href="community_my.html " id="shequ"  class="active" >社区</a></li>
                <li><a href="" id="quanzi" >圈子</a></li>
                <li><a href="" id="forum" >目的地</a></li>
                <li><a href="" id="wenda" >问答</a></li>
                <li><a href="travel_articles.html">攻略</a></li>
                <li><a href="video.html" target="_blank">视频</a></li>
                <li><a href="" target="_blank">领队</a></li>
                <li><a href="photo.html" target="_blank">摄影</a></li>
                <li class="yaoyao_box">
                    <a class="yaoyao_a" href="javascript:;">旅游</a>
                    <div class="yaoyao_ul">
                        <a href="" target="_blank" class="yaoyao_li">周边游</a>
                        <a href="" target="_blank" class="yaoyao_li">国内游</a>
                        <a href="" target="_blank" class="yaoyao_li">出境游</a>
                        <a href="" target="_blank" class="yaoyao_li">当地玩乐</a>
                        <a href="" target="_blank" class="yaoyao_li">亲子游</a>
                        <a href="" target="_blank" class="yaoyao_li">户外游</a>
                        <a href="" target="_blank" class="yaoyao_li">定制游</a>
                        <a href="" target="_blank" class="yaoyao_li">活动赛事</a>
                    </div>
                </li>
                <input type="hidden" value="" id="yxklogin">
                <li style="float: right;"><a href="register.html">注册</a></li>
                <li style="float: right;"><a href="login.html">登录</a></li>
                <li class="xc_message right mouse_up">
                    <div class="xx"><i></i><span></span>消息 <span class="down"></span></div>
<!--                    <ul class=" mouse_wrapper">-->
<!--                        <li><a href="" target="_blank">订单消息</a></li>-->
<!--                        <li><a href="" target="_blank">互动消息</a></li>-->
<!--                        <li><a href="" target="_blank">系统通知</a></li>-->
<!--                        <li><a href="" target="_blank">私信</a></li>-->
<!--                    </ul>-->
                </li>
                <li class="userinfo right mouse_up">
                    <div class="xx">
                        <a href="" target="_blank">
                            <img src="https://img3.youxiake.com/static/images/defaultAvatar.png?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90" alt="">
                        </a>
                        <span class="down"></span>
                    </div>
<!--                    <ul class="userinfo_wrapper mouse_wrapper">-->
<!--                        <li class="color"><a href="" target="_blank">积分 1</a> / <a href="" target="_blank">游侠币 0.00</a></li>-->
<!--                        <li><span class="bg bg1"></span> <input type="hidden" value="11002928" id="yxkuid"> <a href="" target="_blank">我的等级</a></li>-->
<!--                        <li><span class="bg bg2"></span> <a href="" target="_blank">我的领地</a></li>-->
<!--                        <li><span class="bg bg3"></span> <a href="" target="_blank">我的订单</a></li>-->
<!--                        <li><span class="bg bg9"></span> <a href="" target="_blank">我的收藏</a></li>-->
<!--                        <li><span class="bg bg4"></span> <a href="" target="_blank">我的游记/攻略</a></li>-->
<!--                        <li><span class="bg bg5"></span> <a href="" target="_blank">我的草稿箱</a></li>-->
<!--                        <li><span class="bg bg6"></span> <a href="" target="_blank">摄影作品</a></li>-->
<!--                        <li><span class="bg bg7"></span> <a href="" target="_blank">个人设置</a></li>-->
<!--                        <li><span class="bg bg8"></span><a href="">退出登录</a></li>-->
<!--                    </ul>-->
                </li>

            </ul>
        </div>
    </div>
<!--  ----------------------主页面内容 -------------- -->
<!--    图片轮播-->
<div class="min_height">
    <div data-v-7b1fbd7c="" id="slideBox" class="slideBox">
        <div data-v-7b1fbd7c="" id="bd" class="bd"><!---->
            <ul data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: relative;">
                <li data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: absolute; left: 0px; top: 0px; display: list-item;">
                    <a data-v-7b1fbd7c="" href="" target="_blank"><img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/d6d1f72c7393b2ce2c35aec10511bbd2.jpeg?imageMogr2/auto-orient/thumbnail/1920x635" width="1496px"  height="489px"></a>
                    <h3 data-v-7b1fbd7c="">勒，逗是重庆，我的第二故乡</h3></li>

                <li data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: absolute; left: 0px; top: 0px; display: none;">
                <a data-v-7b1fbd7c="" href="" target="_blank"><img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/e9daad0f60df921c5e38c4abddcc1783.jpeg?imageMogr2/auto-orient/thumbnail/1920x635" width="1496px"  height="489px"></a>
                     <h3 data-v-7b1fbd7c="">上海夏日丨说走就走，两个馆，一场展，一片海</h3></li>

                <li data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: absolute; left: 0px; top: 0px; display: none;">
                    <a data-v-7b1fbd7c="" href="" target="_blank">
                        <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/90e58efdf8de9647cbc897cc6d6c23a5.jpeg?imageMogr2/auto-orient/thumbnail/1920x635" width="1496px"  height="489px"></a>
                    <h3 data-v-7b1fbd7c="">留尼汪，留下点什么才能旺？让我把心留给你吧～</h3></li>

                <li data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: absolute; left: 0px; top: 0px; display: none;">
                    <a data-v-7b1fbd7c="" href="" target="_blank">
                        <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/7d9b4369429e2397b2b500fadfb4ebfa.jpeg?imageMogr2/auto-orient/thumbnail/1920x635" width="1496px"  height="489px"></a>
                       <h3 data-v-7b1fbd7c="">西安日记 | 一首千年长安曲，一段关中回忆录，分享在西安72个小时里的遇见</h3></li>

                <li data-v-7b1fbd7c="" style="width: 1479px; height: 489.148px; position: absolute; left: 0px; top: 0px; display: none;">
                    <a data-v-7b1fbd7c="" href="" target="_blank">
                        <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/9ce53796cca18931757de4bc9eabd8ca.jpeg?imageMogr2/auto-orient/thumbnail/1920x635"></a>
                    <h3 data-v-7b1fbd7c="">甘青花季，愿你被这个世界温柔以待</h3></li>
            </ul>
        </div>


        <div data-v-7b1fbd7c="" class="hd">
            <ul data-v-7b1fbd7c="">
                <li data-v-7b1fbd7c="" class="on">
                    <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/d6d1f72c7393b2ce2c35aec10511bbd2.jpeg?imageMogr2/thumbnail/!110x62r/gravity/Center/crop/!110x62/quality/90"></li>
                <li data-v-7b1fbd7c="" class="">
                    <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/e9daad0f60df921c5e38c4abddcc1783.jpeg?imageMogr2/thumbnail/!110x62r/gravity/Center/crop/!110x62/quality/90"></li>
                <li data-v-7b1fbd7c="" class="">
                    <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/90e58efdf8de9647cbc897cc6d6c23a5.jpeg?imageMogr2/thumbnail/!110x62r/gravity/Center/crop/!110x62/quality/90"></li>
                <li data-v-7b1fbd7c="" class="">
                    <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/7d9b4369429e2397b2b500fadfb4ebfa.jpeg?imageMogr2/thumbnail/!110x62r/gravity/Center/crop/!110x62/quality/90"></li>
                <li data-v-7b1fbd7c="" class="">
                    <img data-v-7b1fbd7c="" src="https://img3.youxiake.com/crop/9ce53796cca18931757de4bc9eabd8ca.jpeg?imageMogr2/thumbnail/!110x62r/gravity/Center/crop/!110x62/quality/90"></li>
            </ul>
        </div>
        <div data-v-7b1fbd7c="" class="search_home">
            <div data-v-7b1fbd7c="" class="search_type">
                <input data-v-7b1fbd7c="" type="text" placeholder="游记/旅行攻略/目的地" autocomplete="off" class="input">
                <button data-v-7b1fbd7c="" id="search_button" class="button">搜索</button>
                <div data-v-7b1fbd7c="" class="search-select j_search-select">
                    <ul data-v-7b1fbd7c="" mode="out-in"></ul>
                </div>
            </div>
        </div>
    </div>
<div class="home_content">
    <div class="home_left" >
        <div class="article_notes" id="article">
<!--            热门游记   推荐游记                  -->
            <div data-v-694367fc="" class="article_nav">
                <ul data-v-694367fc="" class="nav_big">
                    <li data-v-694367fc="" class="nav_li active">热门游记</li>
                    <li data-v-694367fc="" class="nav_li">推荐游记</li>
                    <li data-v-694367fc="" class="nav_li">最新游记</li>
                    <li data-v-694367fc="" class="screening"><span data-v-694367fc=""><i data-v-694367fc=""></i>筛选</span></li>
                </ul>
            </div>
<!------------------------------       具体内容       ---------------------------->
            <div data-v-4443603c="" data-v-694367fc="" class="article_item" v-for="(article,index) in articles" id="articles" @click="goToArticle(index)">
                <div data-v-4443603c="" class="f_pic">
                    <a data-v-4443603c="" href="javascript:">
                        <img data-v-4443603c="" :src= article.articleFace lazy="loaded" style="width: 258px;height: 145px;">
                        <div data-v-4443603c="" class="fag fag0">
                        </div>
                    </a>
                </div>
                <div data-v-4443603c="" class="f_right"><dl data-v-4443603c=""><!---->
                    <a data-v-4443603c=""  href="javascript:">
                        <dt data-v-4443603c="">{{article.articleTitle}}</dt>
                        <dd data-v-4443603c="">{{article.articleContent}}</dd>
                    </a>
                </dl>
                    <div data-v-4443603c="" class="article_item_info">
                        <span data-v-4443603c="" data-id="1931" class="tz_mdd">
                            <i data-v-4443603c=""></i>{{article.articleLocal}}</span>
                        <a data-v-4443603c=""  href="javascript:" class="auth" style="color:#ffba00">
                            <img data-v-4443603c="" :src= article.userPicaddress  class="auth_tx" style="width: 24px;height: 24px;">
                            {{article.userRickname}}
                        </a><span data-v-4443603c="" class="tz_look">
                        <i data-v-4443603c=""></i>{{article.hot}}</span>
                    </div>
                </div>
            </div>

            <div class="meneame" id="page">
                <a href="javascript:" @click="pageUp"> &lt; </a>
                <a href="javascript:" v-for="(page,index) in pages" @click="pageIndex(index)">{{page.pageNum}}</a>
                <a href="javascript:" @click="pageDown"> &gt; </a>
            </div>

        </div>



    </div>
    <div class="home_right">
        <div data-v-7a573f46="" class="home_ggw">
            <a data-v-7a573f46="" href="https://bbs.youxiake.com/y/1016453.html" target="_blank">
                <img data-v-7a573f46="" src="https://qimg4.youxiake.com/Public/Data/upload/201904/24/82451556099686.jpg">
            </a>
        </div>
        <div data-v-1857e044="" class="announcement">
            <div data-v-1857e044="" class="home_write">
                <a data-v-1857e044="" href="travel_articles.html" target="_blank" rel="nofollow" class="btn-add"><i data-v-1857e044="">
                </i>写游记</a>
            </div>
           </div>
        <div><img src="images/timg.jpg" alt="" width="280px" height="400px"></div>
    </div>


</div>

</div>
<!--        尾部                  -->

    <!--底部-->
    <div class="b_floor" style="height: 430px;position: relative;top: 750px">
        <div class="l_wrapper">
            <div class="m_unit_b2">
                <div class="footerInfo">
                    <ul class="weima">
                        <li>
                            <img src="https://img3.youxiake.com/static/images/weima1.png" width="77" height="77"><p>神游网公众号</p>
                        </li>
                        <li>
                            <img src="https://img3.youxiake.com/static/images/weima2.png" width="78" height="79"> <p>APP下单更优惠</p>
                        </li>
                    </ul>
                    <p>
                        <a data-trace="页面底部|页面底部_点击|页面底部_关于游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">关于神游网</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_游侠客的故事" rel="nofollow" href="javascript:void (0)" target="_blank">制作组的故事</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_联系游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">联系制作组</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_游侠客招聘" rel="nofollow" href="javascript:void (0)" target="_blank">制作组招聘</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_意见反馈" rel="nofollow" href="javascript:void (0)" target="_blank">意见反馈</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_使用协议" rel="nofollow" href="javascript:void (0)" target="_blank">使用协议</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_隐私政策" rel="nofollow" href="javascript:void (0)" target="_blank">隐私政策</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_交换链接" rel="nofollow" href="javascript:void (0)" target="_blank">交换链接</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_帮助中心" rel="nofollow" href="javascript:void (0)" target="_blank">帮助中心</a>
                        <a data-trace="页面底部|页面底部_点击|页面底部_网站地图" rel="nofollow" href="javascript:void (0)" target="_blank">网站地图</a>
                    </p>
                    <p>
                        <span>浙ICP备 09011712 号-1</span>
                        <span>浙公网安备 33010602002105号</span>
                        <span><a href="javascript:void (0)" rel="nofollow" target="_blank">营业执照</a></span>
                        <span>浙江神游网国际旅行社有限公司</span>
                        <span>杭州途游电子商务有限公司</span>
                        <span>许可证编号：L-ZJ-CJ00161</span>
                    </p>
                    <p>? 2019 shenyouwang.com 版权所有法律顾问：浙江四海方圆律师事务所 傅林放 杭州市旅游投诉电话：0571-96123 投诉及紧急事件联系电话：400-670-6300转5</p>
                    <p>旅游预订电话(免长途费)：400-670-6300，公司总部地址：浙江省杭州市西湖区教工路198号浙商大创业园D幢3楼，投诉建议邮箱：jianyi@youxiake.com</p>
                </div>
                <div class="friendLines">
                    <div class="footerImages clearfix foot-ext">
                        <a href="javascript:;" rel="nofollow" title="不良信息举报中心" class="footer-ext-s2"></a>
                        <a href="javascript:;" rel="nofollow" title="瑞信安全认证" class="footer-ext-s3"></a>
                        <a href="javascript:;" rel="nofollow"  title="12321垃圾信息举报中心" class="footer-ext-s4"></a>
                        <a href="javascript:;" rel="nofollow">
                            <img width="116" height="47" src="https://img3.youxiake.com/static/images/alipay201305.png" alt="支付宝">
                        </a>
                        <a href="javascript:;" rel="nofollow"  title="网络110报警服务" class="footer-ext-s5"></a>
                        <a href="javascript:;" rel="nofollow"  title="网上标识信息" class="footer-ext-s6"></a>
                        <a href="javascript:;" rel="nofollow"  title="全球中文论坛100强" class="footer-ext-s7"></a>
                        <a target="cyxyv" href="https://v.yunaq.com/certificate?domain=bbs.youxiake.com&amp;from=label&amp;code=90020">
                            <img src="https://aqyzmedia.yunaq.com/labels/label_sm_90020.png">
                        </a>
                    </div>
                </div>

            </div>
            <a href="javascript:" name="floor">&nbsp;</a>
        </div>
    </div>
    <!--右侧页面工具-->
    <div class="tool_bar">
        <ul>
            <li class="backBot">
                <i class="icon">
                    <a href="#floor"><img src="./images/下载%20(2).png" alt=""></a>
                </i>
                <span class="name">页面底部</span>
            </li>
            <li class="backTop">
                <i class="icon">
                    <a href="#"><img src="./images/下载%20(3).png" alt=""></a>
                </i>
                <span class="name">返回顶部</span>
            </li>
        </ul>
    </div>


</div>





</body>
</html>